<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../../css/know.css">
    <link rel="stylesheet" type="text/css" href="../../css/header.css">
    <link rel="stylesheet" type="text/css" href="../../css/hot.css">
    <link rel="stylesheet" type="text/css" href="../../css/rightSide.css">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

    <script src="../../js/jquery-3.1.1.min.js"></script>

    <title>知否-Hot</title>

</head>
<body>

<div class="root">
    <div class="HeaderBar shadow-sm">
        <div class="HeaderInner">
            <div class="HeaderTabs">
                <ul class="nav nav-pills">
                    <li class="nav-item">
                        <a class="nav-link active" href="/zhifou/know">知否</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/zhifou/know">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/zhifou/find">发现</a>
                    </li>
<!--                    <li class="nav-item">-->
<!--                        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>-->
<!--                    </li>-->
                </ul>
            </div>
            <div class="input-group mb-3" id="sb-3">
                <input type="text" class="form-control" placeholder="忘了他吧，我偷电瓶养你！" aria-label="Recipient's username"
                       aria-describedby="button-addon2" id="search-content">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary search-btn" type="button" id="button-addon2">搜索</button>
                </div>
            </div>
            <div class="HeaderUserInfo">
                <img src="../../img/icons8-online-support-38.png" alt="" id="img-user-head">
            </div>
        </div>
    </div>

    <div class="main">
        <div class="TopStory">
            <div class="TopStory-container">
                <!-- 左侧内容区域 -->
                <div class="TopStory-mainColumn">
                    <!-- 左侧导航 -->
                    <ul class="nav nav-tabs" id="nav2">
                        <li class="nav-item">
                            <a class="nav-link" href="/zhifou/know">推荐</a>
                        </li>
<!--                        <li class="nav-item">-->
<!--                            <a class="nav-link" href="#">关注</a>-->
<!--                        </li>-->
                        <li class="nav-item">
                            <a class="nav-link active" href="/zhifou/hot">热榜</a>
                        </li>
                    </ul>
                    <!-- 左侧卡片内容区域 -->
                    <div class="hot-area">
<!--                        <div class="hot-card card shadow-sm">-->
<!--                            &lt;!&ndash; 卡片导航头 &ndash;&gt;-->
<!--                            &lt;!&ndash; 第一个模块内容区 &ndash;&gt;-->
<!--                            <div class="hot-card-body card-body">-->
<!--                                &lt;!&ndash; 数字、标题和内容 &ndash;&gt;-->
<!--                                <div class="hot-section">-->
<!--                                    &lt;!&ndash; 左 &ndash;&gt;-->
<!--                                    <div class="order-left">-->
<!--                                        &lt;!&ndash; 热榜排序数字 &ndash;&gt;-->
<!--                                        <div class="order-text">1</div>-->
<!--                                    </div>-->
<!--                                    &lt;!&ndash; 右 &ndash;&gt;-->
<!--                                    <div class="container-right">-->
<!--                                        <a href="#">-->
<!--                                            &lt;!&ndash; 标题 &ndash;&gt;-->
<!--                                            <h2 class="container-tittle-style">南宁电瓶车为何屡遭黑手?小卖部水果刀为何频繁丢失？养殖场母猪为何夜夜嘶叫？下面请听“周某”的不归路。</h2>-->
<!--                                            &lt;!&ndash; 热榜话题描述 &ndash;&gt;-->
<!--                                            <p class="container-text">是看风景卢卡斯的积分是的是解放螺丝扣积分爱上了疯狂世界东方是咯及附近撒打发时间的反馈舒服上空的飞机都是浪费空间上的顺利打开附件</p>-->
<!--                                        </a>-->
<!--                                    </div>-->
<!--                                    &lt;!&ndash; 图片 &ndash;&gt;-->
<!--                                    <div class="hot-img">-->
<!--                                        <img src="../../img/zhoumou.jpg" alt="">-->
<!--                                    </div>-->
<!--                                    &lt;!&ndash; 热度 &ndash;&gt;-->
<!--                                    <div class="hot-footer">-->
<!--                                        &lt;!&ndash; 火星图片 &ndash;&gt;-->
<!--                                        <div class="fire-img"></div>-->
<!--                                        <div class="hot-value"><span>2763万</span> 热度</div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->

<!--                        <div class="hot-card card shadow-sm">-->
<!--                            &lt;!&ndash; 卡片导航头 &ndash;&gt;-->
<!--                            &lt;!&ndash; 第一个模块内容区 &ndash;&gt;-->
<!--                            <div class="hot-card-body card-body">-->
<!--                                &lt;!&ndash; 数字、标题和内容 &ndash;&gt;-->
<!--                                <div class="hot-section">-->
<!--                                    &lt;!&ndash; 左 &ndash;&gt;-->
<!--                                    <div class="order-left">-->
<!--                                        &lt;!&ndash; 热榜排序数字 &ndash;&gt;-->
<!--                                        <div class="order-text">2</div>-->
<!--                                    </div>-->
<!--                                    &lt;!&ndash; 右 &ndash;&gt;-->
<!--                                    <div class="container-right">-->
<!--                                        <a href="#">-->
<!--                                            &lt;!&ndash; 标题 &ndash;&gt;-->
<!--                                            <h2 class="container-tittle-style">女生应该注重漂亮还是学习?</h2>-->
<!--                                            &lt;!&ndash; 热榜话题描述 &ndash;&gt;-->
<!--                                            <p class="container-text">应该注重学习。-->

<!--                                                因为漂亮不一定是真漂亮，你不能同时满足所有人的审美。-->

<!--                                                但学习是真学习。</p>-->
<!--                                        </a>-->
<!--                                    </div>-->
<!--                                    &lt;!&ndash; 图片 &ndash;&gt;-->
<!--                                    <div class="hot-img">-->
<!--                                        <img src="../../img/jie.jpg" alt="">-->
<!--                                    </div>-->
<!--                                    &lt;!&ndash; 热度 &ndash;&gt;-->
<!--                                    <div class="hot-footer">-->
<!--                                        &lt;!&ndash; 火星图片 &ndash;&gt;-->
<!--                                        <div class="fire-img"></div>-->
<!--                                        <div class="hot-value"><span>2763万</span> 热度</div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
                    </div>
                    </div>


                <!-- 规划区 ---------------------------------->



                <!-- -------------------------------------- -->

                <!-- 右侧内容区域 -->
                <div class="GlobalSideBar">
                    <div class="card sideCard shadow-sm">
                        <div class="card-body">
                            <!-- 右侧卡片小组件 -->
                            <div class="SideBar">
                                <div id="area-question" data-toggle="modal" data-target="#staticBackdrop1">
                                    <img src="../../img/icons8-help-48.png"/>
                                    <span>提问</span>
                                </div>
                                <div id="area-article" data-toggle="modal" data-target="#staticBackdrop2">
                                    <img src="../../img/icons8-translate-text-48.png"/>
                                    <span>文章</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- 提问题Modal -->
<div class="modal fade" id="staticBackdrop1" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">提问</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 写入问题 -->
                <div class="form-group">
                    <label for="exampleFormControlTextarea1">写入问题：</label>
                    <textarea class="form-control is-invalid" id="exampleFormControlTextarea1" rows="3" required></textarea>
                </div>
                <!-- 问题描述 -->
                <div class="form-group">
                    <label for="exampleFormControlTextarea1">问题描述：</label>
                    <textarea class="form-control" id="exampleFormControlTextarea2" rows="3"></textarea>
                </div>
                <!-- 问题标签 -->
                <label>问题标签:</label>
                <div class="form-group row">
                    <div class="col-sm-5">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="gridCheck1" value="饭圈">
                            <label class="form-check-label">
                                视频
                            </label>
                        </div>
                    </div>

                    <div class="col-sm-5">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="gridCheck1" value="电竞">
                            <label class="form-check-label">
                                科学
                            </label>
                        </div>
                    </div>

                    <div class="col-sm-5">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="gridCheck1" value="电影">
                            <label class="form-check-label">
                                数码
                            </label>
                        </div>
                    </div>

                    <div class="col-sm-5">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="gridCheck1" value="明星">
                            <label class="form-check-label">
                                体育
                            </label>
                        </div>
                    </div>

                    <div class="col-sm-5">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="gridCheck1" value="动画">
                            <label class="form-check-label">
                                时尚
                            </label>
                        </div>
                    </div>

                    <div class="col-sm-5">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="gridCheck1" value="热点">
                            <label class="form-check-label">
                                影视
                            </label>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="btn-confirm-put" data-dismiss="modal">发表</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../../js/header.js"></script>
<script src="../../js/hot.js"></script>


</body>
</html>
